<template>
    <!-- components/nav.wxml -->
   <view :style="'padding-top:' + (cover_state ? bar_Height + 44 : 0) + 'px;'">
        <view class="status-bar">
            <view class="goBack" @tap="goBack" :style="'padding-top:' + bar_Height + 'px;'" v-if="!show_bol">
                <image :src="image"></image>
            </view>
            <view :class="'tabar ' + (my_class ? 'tabar2' : '')" :style="'padding-top:' + bar_Height + 'px;'">
                <text :style="'color: ' + txtColor + ';'">{{ title }}</text>
            </view>
        </view>
    </view>
</template>
<script>
	export default {
		name: 'UniSteps',
		props: {
			title: {			// 设置标题
			  type: String,
			  value: ''	
			},
			image:{ //返回图标
			  type: String,
			  value: ''
			},
			txtColor:{
			  type:String,
			  value:''
			},
			cover_state: {	 // 控制页面padding-top
			  type: Boolean,
			  value: false
			},
			show_bol: {			// 控制返回箭头是否显示
			  type: Boolean,
			  value: true
			},
			my_class: {			// 控制样式
			  type: Boolean,
			  value: false
			}
		},
		data() {
			return {
				bar_Height: uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			goBack: function () {					// 返回事件
			  uni.navigateBack({
				delta: 1,
			  })
			 
			}
		}
	}
</script>
<style lang="less">
/* components/nav.wxss */
.status-bar {
    width: 100%;
    z-index: 99999;
    position: fixed;
    top: 0;
}
.goBack {
    position: absolute;
    top: 15rpx;
    font-size: 12pt;
}
.goBack image {
    width: 21rpx;
    height: 35rpx;
    padding: 12rpx 20px 0 20rpx;
}
.tabar {
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
}

.tabar2 {
    background: transparent !important;
}
.tabar2 text {
    color: #18181a !important;
    font-weight: lighter !important;
}
.tabar text {
    height: 44px;
    line-height: 44px;
    padding: 0 30rpx;
    color: #18181a;
    font-size: 36rpx;
    font-weight: bold;
    font-family: PingFang SC;
}
.tabar .active {
    color: #fff;
}
</style>
